<template>
    <div>
        <li class="rule-tree-item" style="width: 5000px">
            <div class="item-wrapper" onselectstart="return false;">
                <div @click="toggle" class="item-toggle" v-if="showFolder" style="float: left;height: 24px;line-height: 24px">
                    <Icon type="ios-arrow-forward" size="14" v-if="!open"/>
                    <Icon type="ios-arrow-down" size="14" v-if="open" />
                </div>
                <div v-else class="item-toggle">

                </div>
                <div style="vertical-align:bottom;font-size: 14px;line-height: 24px;float: left;height: 24px" >
                    <div v-if="showExpress" class="item-bold ">
                        {{strExpress}}
                    </div>
                    <div v-if="depth==1" class="item-bold">
                        {{ruleData.label}}
                    </div>
                    <Express @validate="validateRule" v-if="(depth>1&&!showExpress)"  :index="index" :showLabel="index>0" :label="chineseLang?ruleData.label:ruleData.key" :not="this.ruleData.not" @calexp="handle"  :ruleAtoms="ruleAtoms" :express="this.ruleData.express" :operations="operations"/>
                    <div style="clear:both"></div>
                </div>
                <div v-if="showNot" class="ivu-dropdown-rel rule-tree-dropdown"  @click="not">
                    <a href="javascript:void(0)" style="color: #9838dc">
                        取反
                    </a>
                </div>
                <div style="vertical-align:bottom;font-size: 14px;line-height: 24px;float: left;height: 24px">
                    <Dropdown :transfer="true" class='rule-tree-dropdown' v-if="showAdd" trigger="click" @on-click="ruleTypeDropDownSelected">
                        <a href="javascript:void(0)">
                            添加
                        </a>
                        <DropdownMenu slot="list" v-if="(hasIfNode||(this.ruleData.rows.length==0))" >
                            <DropdownItem name="express" v-if="!hasIfNode">表达式</DropdownItem>
                        </DropdownMenu>
                        <DropdownMenu slot="list" v-if="(!hasIfNode&&(this.ruleData.rows.length>0))||depth>1" >
                            <DropdownItem name="plus" v-if="this.ruleData.rows.length>0">加</DropdownItem>
                            <DropdownItem name="minus" v-if="this.ruleData.rows.length>0">减</DropdownItem>
                            <DropdownItem name="times" v-if="this.ruleData.rows.length>0">乘</DropdownItem>
                            <DropdownItem name="divided" v-if="this.ruleData.rows.length>0">除</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
                 <div v-if="showDelete"  style=" margin-left:5px" class="ivu-dropdown-rel rule-tree-dropdown"  @click="emitDelete">
                    <a href="javascript:void(0)" style="color: #e74141">
                        删除
                    </a>
                </div>
                <div v-if="depth==1" style=" margin-left:5px;vertical-align:bottom;font-size: 14px;line-height: 24px;float: left;height: 24px">
                    <div  class="item-bold ">
                    </div>
                </div>
                <div style="clear:both"></div>
                <ul v-if="isFolder" v-show="open" class="rule-tree-list">
                    <tree-item
                        v-for="(item,itemIndex) in ruleData.rows"
                        :rule-data="item"
                        :ruleAtoms="ruleAtoms"
                        :operations="operations"
                        @delete="deleteItem"
                        @calexp="handle"
                        :key="item.uuid"
                        :chineseLang="chineseLang"
                        :index="itemIndex"
                        :depth="depth + 1"
                    />
                </ul>
            </div>
            <div style="clear:both"></div>
        </li>
    </div>
</template>
<script>
    import Express from "../component/express/TernaryExpress";
    import ruiMixin from "../mixin/rule-mixin";
    import {calStrExpress, genTernaryExpression} from "./util";
    import Constants from "../component/constant/constant";
    export default {
        name: 'tree-item',
        mixins: [ruiMixin],
        components:{
            'Express':Express
        },
        props: {
            ruleData: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            depth:{
                type:Number,
                require: true
            },
            ruleAtoms: {
                type: Array,
                require:true
            },
            operations: {
                type: Array,
                require:true
            },
            name: {
                type: String,
                require: true,
                default: () => {
                    return 'rule edit'
                }
            },
            index:{
                type:Number,
                require:true
            },
            chineseLang:{
                type:Boolean,
                require:true
            }
        },

        data() {
            return {
                open:this.ruleData.rows&&this.ruleData.rows.length>0,
                strExpress:calStrExpress(this.ruleData,this.index,this.chineseLang),
                chinese:null,
                program:null,
                itemValidate:false
            }
        },
        computed: {
            isFolder(){
                return this.ruleData.rows&&this.ruleData.rows.length>0
            },

            hasIfNode() {
                return this.ruleData.rows.filter(row=>{
                    return row.type==='choice'
                }).length>0
            },
            showFolder(){
                return true
            },
            showAdd(){
                return this.ruleData.type == 'express'||this.depth==1
            },
            showDelete(){
                if((this.ruleData.type=='express'&&(this.ruleData.key=='if'))){
                    return false;
                }
                if(this.depth==1){
                    return false
                }
                return true
            },
            showNot(){
                return this.ruleData.type=='and'||this.ruleData.type=='plus' || this.ruleData.type=='minus' ||this.ruleData.type=='times' ||this.ruleData.type=='divided'
            },
            showExpress(){
                return  this.ruleData.type == 'express'
            }
        },

        created() {
        },

        watch: {
            'ruleData.rows':function () {
                this.handle();
            },
            'ruleData.type':function(){
                this.handle();
            },
            chineseLang(){
                this.handle();
            }
        },

        methods: {
            validateRule(validate){
                this.itemValidate = validate;
            },
            toggle() {
                if (this.isFolder&&this.ruleData.rows.length>0) {
                    this.open = !this.open
                }
            },
            handle() {
                this.strExpress = calStrExpress(this.ruleData,this.index,this.chineseLang);
                if(this.chineseLang){
                    this.chinese=this.strExpress;
                    this.program =calStrExpress(this.ruleData,this.index,false);
                }else{
                    this.program =this.strExpress;
                    this.chinese =calStrExpress(this.ruleData,this.index,false);
                }
                this.$emit('calexp',this.strExpress,this.chinese,this.program);
            },
            deleteItem(deleteIndex){
                this.ruleData.rows.splice(deleteIndex,1);
                if(this.ruleData.rows.length===0){
                    this.open = false
                }
                this.handle()
            },
            emitDelete(){
                this.$Modal.confirm({
                    title: '确认删除该条配置?',
                    content: '',
                    onOk: () => {
                        this.$emit('delete',this.index);
                    },
                    onCancel: () => {
                    }
                });
            },
            not(){
                this.ruleData.not = !this.ruleData.not;
                this.handle();
            },
            ruleTypeDropDownSelected(type){
                if(type==='choice'){
                    this.addLogicItem(Constants.genChoiceItem());
                    this.open = true;
                }else if(type==='express'){
                    this.addLogicItem(Constants.genAndItem());
                    this.open = true;
                }else if(type==='plus'){
                    this.addLogicItem(Constants.genPlusItem());
                    this.open = true;
                }else if(type==='minus'){
                    this.addLogicItem(Constants.genMinusItem());;
                    this.open = true;
                }else if(type==='times'){
                    this.addLogicItem(Constants.genTimesItem());
                    this.open = true;
                }else if(type==='divided'){
                    this.addLogicItem(Constants.genDividedItem());
                    this.open = true;
                }
                this.handle()
            },
            addLogicItem(item){
                if(this.ruleData.type=='express'){
                    this.ruleData.rows.push(item.rows[0])
                }else{
                    this.ruleData.rows.push(item)
                }
            }
        }
    }
</script>
